<template>
  <div class="app-container">
    <div class="version-body">
      <div class="v-info">
        <div class="v-logo"><img src="@/assets/logo.svg" :alt="app.siteName"/></div>
        <div class="v-name">{{ app.siteName }}</div>
      </div>

      <div class="dis-table-wrap">
        <table class="dis-table">
          <tr>
            <th style="width: 20%">A NET版本</th>
            <td align="left">{{ versionData.dc || '无'}}</td>
            <td style="width: 20%">
              <el-upload v-permission="['Admin.Version.Update']" action :show-file-list="false" :http-request="importDc" class="filter-item">
                <el-button
                  :loading="importLoading"
                  size="mini"
                  type="primary"
                  icon="el-icon-upload2"
                >上传
                </el-button>
              </el-upload>
            </td>
          </tr>
          <tr>
            <th>B NET版本</th>
            <td align="left">{{ versionData.dg || '无'}}</td>
            <td>
              <el-upload v-permission="['Admin.Version.Update']" action :show-file-list="false" :http-request="importDg" class="filter-item">
                <el-button
                  :loading="importLoading"
                  size="mini"
                  type="primary"
                  icon="el-icon-upload2"
                >上传
                </el-button>
              </el-upload>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="v-disc">版权所有 &copy;2020 {{ app.siteName }}平台. 保留所有权利。</div>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  import {
    getVersionLatest,
    importVersionDc,
    importVersionDg
  } from "@/api/version";

  export default {
    components: {
    },
    data() {
      return {
        importLoading: false,
        tableLoading: false,
        tableKey: 0,
        versionData: {}
      };
    },
    computed: {
      ...mapGetters(["app"])
    },
    created() {
      this.getVersionLatest();
    },
    methods: {
      getVersionLatest() {
        this.tableLoading = true;
        getVersionLatest().then(result => {
          this.versionData = result;
          this.tableLoading = false;
        });
      },
      importDc(fileObj) {
        this.$confirm("将上传A NET版本，确定继续吗？", "确定执行上传操作吗？", {
          type: "warning"
        })
          .then(() => {
            this.importLoading = true;
            const param = new FormData();
            param.append("file", fileObj.file);
            importVersionDc(param).then(result => {
              this.importLoading = false;
              this.$message({
                message: "上传成功",
                type: "success"
              });
            });
          })
          .catch(() => {
          });
      },
      importDg(fileObj) {
        this.$confirm("将上传B NET版本，确定继续吗？", "确定执行上传操作吗？", {
          type: "warning"
        })
          .then(() => {
            this.importLoading = true;
            const param = new FormData();
            param.append("file", fileObj.file);
            importVersionDg(param).then(result => {
              this.importLoading = false;
              this.$message({
                message: "上传成功",
                type: "success"
              });
            });
          })
          .catch(() => {
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .version-body {
    min-height: 300px;
    text-align: center;

    .v-logo {
      padding-top: 50px;

      img {
        width: 80px;
      }
    }

    .v-name {
      padding: 10px 0;
      font-size: 24px;
      font-weight: bold;
    }

    .v-version {
      color: #5f6368;
      font-size: 14px;
      margin-bottom: 10px;

      button {
        min-width: 150px;
      }
    }
  }

  .v-disc {
    text-align: center;
    padding-top: 150px;
    font-size: 12px;
  }

  .v-info {
    margin-bottom: 30px;
  }

  .dis-table-wrap {
    padding: 0 30px 30px;
    background-color: #fff;

    & + .dis-table-wrap {
      margin-top: 32px;
    }
  }

  .dis-title {
    display: flex;
    padding: 20px 0;
    font-weight: bold;

    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background-color: #409EFF;
      margin-right: 10px;
    }
  }

  .dis-table {
    width: 100%;
    border-collapse: collapse;

    tr {
      th {
        font-size: 14px;
        text-align: center;
        background: #eef1f6;
      }

      td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
        color: #606266;
      }

      th, td {
        border: 1px solid #dfe6ec;
        padding: 8px;
        vertical-align: middle;
      }
    }
  }
</style>
